<template>
  <div
    class="sm-nav-layout"
    :style="{ height: layoutHeight, lineHeight: layoutHeight }"
  >
    <template v-for="(item, i) in buttonGroup" :key="i">
      <div
        :class="i === active ? 'sm-button active' : 'sm-button'"
        :style="{
          ...buttonStyle,
          '--active-min-width': i === active ? activeMinWidth : 'auto',
        }"
        :disabled="item.disabled"
        @click="handleMenu(item)"
      >
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

<script setup>
import { reactive } from "vue";

defineOptions({
  name: "tab-nav-button",
});

const props = defineProps({
  buttonGroup: {
    type: Array,
    required: true,
    default: [
      { id: 1, name: "总览" },
      { id: 2, name: "基础设施监控" },
      { id: 3, name: "应用监控" },
    ],
  },
  active: {
    type: Number,
    default: 0,
  },
  activeMinWidth: {
    type: String,
    default: "0.6rem",
  },
  layoutHeight: {
    type: String,
    default: () => {
      return "1.56rem";
    },
  },
  buttonStyle: {
    type: Object,
    default: () => {
      return {
        width: "2.5rem",
        fontSize: "0.25rem",
        height: "0.5rem",
        // lineHeight: "0.8rem",
        marginRight: "0.2rem",
        padding: "0 0.15rem",
        minWidth: "0.6rem",
      };
    },
  },
});

const handleMenu = (item) => {
  // console.log("item", item);
  emit("handleMenu", item);
};

const emit = defineEmits(["changeTab"]);

// let buttonGroup = reactive([
//   { id: 1, name: "总览" },
//   { id: 2, name: "基础设施监控" },
//   { id: 3, name: "应用监控" },
//   { id: 4, name: "业务运维" },
//   { id: 5, name: "需求追踪" },
// ]);
</script>

<style scoped lang="less">
.sm-nav-layout {
  // height:
  display: flex;
  justify-content: center;
  align-items: center;
  .sm-button {
    cursor: pointer;
    // width: 2.5rem;
    // height: 0.8rem;
    background: url("../../assets/img/theme1/footer-button.png");
    // font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0.04rem;
    text-align: center;
    // line-height: 0.8rem;
    text-shadow: 0 0 0.08rem #6ed2ff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 0.1rem;
    padding: "0 0.15rem";

    &.active {
      // width: 1.88rem;
      max-width: 2rem;
      min-width: var(--active-min-width);
      font-weight: 600;
      // height: 0.8rem;
      // line-height: 0.8rem;
      // font-size: 0.36rem;
      background-repeat: no-repeat !important;
      background-size: 100% 100% !important;
      background: url("../../assets/img/theme1/footer-button-active.png");
    }
  }
}
</style>